<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="序号">
    <input type="text" placeholder="姓名">
    <input type="button" value="提交">
    <ul id="app">
        <li>
            序号：<i>1</i>===姓名：<i>珠峰</i>===<button>删除<tton>
        </li>
    </ul>
    <script src="../0413/js/jquery-3.3.1.js"></script>
    <script>
        var ary = [{
            index: 1,
            name: "珠峰1"
        },
        {
            index: 2,
            name: "珠峰2"
        },
        {
            index: 3,
            name: "珠峰3"
        },
        {
            index: 4,
            name: "珠峰4"
        }
    ];
    let $ul = $('#app');
    let render = function () {
        let str = ``;
        ary.forEach((item, index) => {
            str += ` <li>
            序号：<i>${item.index}</i>===姓名：<i>${item.name}</i>===<button>删除</button>
        </li>`;
        });
        $ul.html(str);
        handle();
    }
    let handle = function handle() {
        let $btns = $('button', $ul);
        // debugger
        $btns.on('click', function () {
            let $this = $(this);
            let n = $this.parent().index();
            ary.splice(n, 1);
            render();
        });
    };
    render();
    let $inp = $('input');
    $inp.eq(2).on('click', function () {
        let i = $inp[0].value,
            name = $inp.eq(1).val();
        ary.push({
            index: i,
            name
        });
        $inp[0].value = '';
        $inp.eq(1).value('');
        render();
    });
    </script>
</body>
</html>